#banner{margin-top:90px;}
#banner .slick-slide { position:relative; overflow:hidden; }
#banner .slick-slide >a { display:block; position:relative; background-repeat:no-repeat; background-position:50% 50%; background-size:cover; overflow:hidden; }
.slick-slide a img { width:100%; }
.slick-slide video,.slick-slide iframe,.slick-slide canvas { position:absolute; left:0; top:0; width:100%; height:100%; transform:scale(1.4); z-index:2; }
.slick-slide video,.slick-slide canvas { width:auto; transform:scale(1.4); }
#banner .slick-slide .art { position:absolute; z-index:3; width:calc(50% - 140px); top:0; right:0; color:#fff; height:calc(100% - 100px); background:rgba(28,28,28,0.71); padding:50px 70px; }
#banner .slick-slide h2 { font-size:50px; line-height:110%; text-align:left; margin-top:30%; width:70%; font-family:'Noto Serif TC',serif; text-shadow:0 0 5px rgba(0,0,0,0.72); }
#banner .slick-slide p { margin-top:40px; font-size:16px; line-height:130%; text-align:left; width:70%; text-shadow:0 0 2px rgba(0,0,0,0.72); }
#banner .slick-slide b { display:block; font-size:16px; line-height:110%; color:#ffffff; margin-top:65px; transition:all linear .2s; cursor:pointer; text-align:right; width:80%; position:relative; font-weight:normal; transition-delay:.4s; }
#banner .slick-slide b:after { content:''; width:40px; height:1px; background:#9e7242; display:block; position:absolute; right:60px; top:13px; transition:all linear .2s; transition-delay:.2s; }
#banner .slick-slide b:before { content:''; width:13px; height:1px; background:#9e7242; display:block; position:absolute; right:58px; top:5px; transform:rotate(35deg); transform-origin:0 0; transition:all linear .2s; }
#banner .slick-dots { text-align:right; top:10px; right:10px; width:auto; height:30px; }
#banner .slick-dots li button:before,#banner .slick-dots li.slick-active button:before { color:#fff; font-size:12px; }
#views { width:calc(100% - 90px); margin-left:90px; }

@media (min-width:1025px) {
	#banner .slick-slide a:hover b:after { width:0; }
	#banner .slick-slide a:hover b:before { transform:rotate(0deg); top:13px; width:0; right:60px; }
	#banner .slick-slide a:hover b { color:#9e7242; }
}
@media (max-width:1280px) {
	#banner .slick-slide h2 { margin-top:20%; font-size:40px; }
}
@media (max-width:1024px) {
	#banner {margin-top: 77px;}
	#banner .webframe { width:100%; }
	#banner .slick-slide h2 { width:100%; margin-top:10%; font-size:35px; }
	#banner .slick-slide p , #banner .slick-slide b { width:100%; }
}
@media (max-width:768px) {
	#banner .slick-slide h2 { font-size:30px; }
	#banner .slick-slide p { margin-top:30px; }
	#banner .slick-slide .art { width:calc(50% - 100px); padding:50px; }
	#banner .slick-slide b { display:none; }
}
@media (max-width:640px) {
	#banner {margin-top: 109px;}
	#banner .slick-slide h2 { font-size:24px; }
	#banner .slick-slide p { margin-top:20px; font-size:15px; }
}
@media (max-width:480px) {
	#banner .slick-slide .art { width:calc(80% - 80px); background:none; padding:40px; }
	#banner .slick-slide h2 { font-size:22px; text-shadow:0 0 2px rgba(0,0,0,0.72),0 0 2px rgba(0,0,0,0.72); }
	#banner .slick-slide p { text-shadow:0 0 1px rgba(0,0,0,0.72),0 0 1px rgba(0,0,0,0.72); }
	#banner .slick-slide a img {padding: 15px 0;}
	#banner .slick-dots li { margin:0; }
}